<template lang="">
    <div class="app-container">
        <el-row style="margin-bottom: 20px">
            <el-col :span="1.5">
                <el-button type="primary" @click="getList" icon="refresh" size="mini">手动刷新任务</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="list" border>
            <el-table-column label="演练计划" align="center" prop="planTitle" />
            <el-table-column label="处置流程" align="center" prop="handleName"> </el-table-column>
            <el-table-column label="任务内容" align="center" prop="taskContent" />
            <el-table-column label="接收时间" align="center" prop="startTime" />
            <el-table-column label="任务状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1" size="mini">未执行</el-tag>
                    <el-tag type="success" v-if="scope.row.status == 2" size="mini">已执行</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleDetail(scope.row)">任务详情</el-button>
                    <el-button size="mini" type="text" @click="handleExecute(scope.row)" v-if="scope.row.status != 2">执行任务</el-button>
                    <el-button type="text" size="mini" @click="chat(scope.row)">任务沟通</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <drill-son-tasks ref="drillSonTasks" @handleOk="getList" />
        <task-execute ref="taskExecute" @handleOk="getList" />
        <task-detail ref="taskDetail" />
        <ChatIM ref="chatIM" />
        <TaskSonDetail ref="taskDetailRef" />
    </div>
</template>
<script>
/**
 * 演练任务列表页面
 * 当前页面主要用于二级保障部门和保障科队的任务列表
 * 二级保障部门显示一级任务，执行的时候弹出弹窗显示二级任务列表
 * 保障科队显示二级任务列表，执行的时候弹出任务执行窗口
 */
import * as Auth from "@/utils/auth";
import DrillSonTasks from "./components/DrillSonTasks.vue";
import TaskExecute from "./components/TaskExecute.vue";
import TaskDetail from "./components/DrillTaskDetail.vue";
import { getDrillTaskList } from "@/api/drill/task";
import chatMixin from "@/mixins/chatMixin";
import ChatIM from "@/components/ChatIM/task.vue";
import TaskSonDetail from "./components/DrillSonTaskDetail.vue";

export default {
    name: "DrillTaskList",
    mixins: [chatMixin],
    components: { DrillSonTasks, TaskExecute, TaskDetail, ChatIM, TaskSonDetail },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 10,
            // 应急演练计划表格数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            let userId = Auth.getUserId();
            getDrillTaskList(userId, this.queryParams).then(res => {
                this.loading = false;
                this.list = res.rows;
                this.total = res.total;
            });
        },
        isSonTask(row) {
            return row.parentId != null;
        },
        handleExecute(row) {
            // 执行任务
            // 如果是一级任务，弹出二级任务列表弹窗
            // 如果是二级任务，直接弹出任务执行窗口
            if (row.parentId == 0) {
                // 一级任务
                this.$refs.drillSonTasks.showList(row.taskId, row.handleId, row.levelId, row.planId);
            } else {
                // 二级任务
                this.$refs.taskExecute.showDialog(row);
            }
        },
        handleDetail(row) {
            if (row.parentId == 0) {
                this.$refs.taskDetail.showDialog(row);
            } else {
                this.$refs.taskDetailRef.showDialog(row);
            }
        },
        chat(row) {
            console.log(row);
            this.initTaskChat("drill", row.planId, row.taskId, "");
        },
    },
};
</script>
<style lang=""></style>
